<template>
  <input type="text" v-model="user.id">
  <input type="text" v-model="user.name">
  <button @click="addItem">提交</button>
  <ul>
    <li v-for="(item, i) in data.arr" :key="item.id" @click="removeItem(i)">{{ item.name }}</li>
  </ul>
</template>

<script>
import { useDelItem, useAddItem } from './hooks'
export default {
  setup() {
    const { data, removeItem } = useDelItem()
    const { user, addItem } = useAddItem(data)
    return { data, removeItem, user, addItem }
  }
}
</script>